import React, { useState } from 'react';
import { List, Card, Button } from 'antd';
import { getPrice1 } from '../utils';
import { TypeMap } from '../type';
type dataType = { name?: string; originalPrice: number; type: string };
const Index = () => {
  const [showCode, setShowCode] = useState<boolean>(false);
  const [showResult, setShowResult] = useState<boolean>(false);
  const data: dataType[] = [
    {
      originalPrice: 100,
      type: 'pre-sale',
    },
    {
      originalPrice: 50,
      type: 'promotion',
    },
    {
      originalPrice: 100,
      type: 'promotion',
    },
    {
      originalPrice: 100,
      type: '',
    },
  ];
  const funcStr = `
  /**
   * 原价根据不同的条件得到新的价格
   * @param originalPrice 原价
   * @param type 条件类型
   * @returns 新的价格
   */
  const getPrice1 = (originalPrice: number, type: string) => {
    switch (type) {
      case 'pre-sale':
        return originalPrice * 0.8;
      case 'promotion':
        if (originalPrice < 100) {
          return originalPrice * 0.9;
        } else {
          return originalPrice - 15;
        }
      default:
        return originalPrice;
    }
  };`;
  return (
    <div>
      <h3>策略模式</h3>
      <div>
        策略模式是一种行为设计模式，它将一组行为转换为对象，并使其在原始上下文对象内部能够相互替换。
      </div>
      <h3>核心</h3>
      <ul>
        <li>定义了一组算法（业务规则）；</li>
        <li>封装了每个算法-即策略类；</li>
        <li>这组的算法在原始上下文对象内可互换代替（interchangeable）。</li>
      </ul>

      <h3>举个例子🌰：</h3>
      <div>
        假如正在开发一个在线商城的项目，每个产品都有原价，称之为
        originalPrice。但实际上并非所有产品都以原价出售，可能会推出允许以折扣价出售商品的促销活动。
      </div>
      <div>
        商家可以在后台为产品设置不同的状态，然后实际售价将根据产品状态和原价动态调整。
        具体规则如下：
      </div>
      <ul>
        <li>部分产品已预售：为鼓励客户预订，将在原价基础上享受 20% 的折扣。</li>
        <li>
          部分产品处于正常促销阶段：如果原价低于100，则以10%的折扣出售；如果原价高于或等于
          100，则减 15 元。
        </li>
        <li>有些产品没有任何促销活动：它们属于 default 状态，并以原价出售。</li>
      </ul>
      <div>这时需要写一个获取商品价格的函数 getPrice ，应该怎么写呢？</div>
      <Button
        style={{ margin: '20px 0' }}
        type="link"
        onClick={() => setShowCode(!showCode)}
      >
        {showCode ? '隐藏代码' : '展示代码'}
      </Button>
      {showCode && (
        <pre style={{ background: '#eee', padding: 20 }}>{funcStr}</pre>
      )}
      <Button
        style={{ margin: '20px 0' }}
        type="link"
        onClick={() => setShowResult(!showResult)}
      >
        {showResult ? '隐藏结果' : '展示结果'}
      </Button>
      {showResult && (
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }}
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <Card title={TypeMap[item.type] || '正常销售'}>
                <div>原价：{item.originalPrice}</div>
                <div>现价：{getPrice1(item.originalPrice, item.type)}</div>
              </Card>
            </List.Item>
          )}
        />
      )}
    </div>
  );
};
export default Index;
